<template>
    <div class="app-container">
        
           <!--查询表单-->
<div class="search-div">
      <el-form label-width="70px" size="small">
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色名称">
              <el-input style="width: 100%" v-model="searchObj.roleName" placeholder="角色名称" clearable ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display:flex">
          <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
        </el-row>
      </el-form>
    </div>

        <!-- 工具条 -->
<div class="tools-div">
  <el-button type="success" icon="el-icon-plus" size="mini"  @click="add">添 加</el-button>
  <el-button type="success" icon="el-icon-plus" size="mini"  @click="pay">付款测试</el-button>

  <el-button class="btn-add" type="danger" icon="el-icon-delete" size="mini" @click="betchRemove">批量删除</el-button>
</div>

   <!-- 表格 -->
   <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      @selection-change="handleSelectionChange">
      style="width: 100%;margin-top: 10px;">

      <el-table-column
      type="selection"
      width="55">
    </el-table-column>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="roleName" label="角色名称" />
      <el-table-column prop="roleCode" label="角色编码" />
      <el-table-column prop="createTime" label="创建时间" width="160" />
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"/>
          <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignAuth(scope.row)" title="分配权限"/>
        </template>
      </el-table-column>
    </el-table>

        <!-- 分页组件 -->
  <el-pagination
    :current-page="page"
    :total="total"
    :page-size="limit"
    style="padding: 30px 0; text-align: center;"
    layout="total, prev, pager, next, jumper"
    @current-change="fetchData"
  />

  <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
      <el-form ref="dataForm" :model="sysRole" label-width="150px" size="small" style="padding-right: 40px;">
        <el-form-item label="角色名称">
          <el-input v-model="sysRole.roleName"/>
        </el-form-item>
        <el-form-item label="角色编码">
          <el-input v-model="sysRole.roleCode"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
      </span>
</el-dialog>

    </div>
</template>

<script>

import api from '@/api/sysRole/role.js'
import SnowflakeId from 'snowflake-id'
export default {
    
    data(){
        return{
            //加载图标
            listLoading:false,
            //角色集合
            list:[],
            //当前页码
            page:1,
            //每页条数
            limit:5,
            //总条数
            total:'',
            //查询条件
            searchObj:{},
            //弹框显示
            dialogVisible:false,
            //角色数据
            sysRole:{},
            //选择项
            multipleSelection:[],
        }

        
    },
    created(){
        this.fetchData();
    },
   methods:{

    pay(){
      const snowflake = new SnowflakeId({
mid: 42,
offset: (2019 - 1970) * 31536000 * 1000 +(31536000* 400)});

      console.log(snowflake)
      console.log(snowflake.generate())
      let total  =30.22;
      window.location.href = `http://localhost:8085/system/alipay/pay?subject=采购订单&out_trade_no=${snowflake.generate()}&total_amount=
      ${total}`
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    //查询方法
    fetchData(page=1){
        this.page = page;
        api.getRoleList(this.page,this.limit,this.searchObj).then(res=>{
            console.log(res)
            //赋值
            this.total = res.data.total;
            this.list = res.data.records;
        })
    },
    //重置表单
    resetData(){
        this.searchObj={},
        this.fetchData();
    },
    //点击添加
    add(){
        //清空表单
        this.sysRole={}
        this.dialogVisible = true;
    },
    //添加或删除
    saveOrUpdate(){
        if(this.sysRole.id){
            //修改
            this.updateRole();
        }else{
            //添加
            this.addRole();
        }
    },
   

   //添加角色
    addRole(){
        api.addRole(this.sysRole).then(res=>{
            //给出提示
            this.tips(res.code==200,'添加角色')
            //刷新列表
            this.fetchData();
            //关闭弹窗
            this.dialogVisible=false;
        })
    },
    //点击修改
    edit(id){
        //回显数据
        // console.log(id)
       api.findById(id).then(res=>{
        // console.log(res)
        this.sysRole = res.data;
        //显示弹框
        this.dialogVisible = true;
       })
    },
    //修改角色
    updateRole(){
        api.updateRole(this.sysRole).then(res=>{
            //刷新列表
            this.fetchData();
            //给出提示
            this.tips(res.code==200,'修改角色')
            //关闭弹窗
            this.dialogVisible=false;
        })
    },

    //通过id删除角色
    removeDataById(id){
        this.$confirm('确定要执行删除操作吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            api.removeRole(id).then(res=>{
            // console.log(res)
            //给出提示
            this.tips(res.code==200,'删除角色')
            //刷新列表
            this.fetchData();
        })
        })         
        
    },
    betchRemove(){

        this.$confirm('确定要执行删除操作吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var ids = [];
          this.multipleSelection.forEach(el => {
            ids.push(el.id)
          });
          console.log(ids)
          api.removeByIds(ids).then(res=>{
            //成功提示
            this.tips(res.code==200,'批量删除');
            //刷新列表
            this.fetchData();
        })
        })         
       
    },

    showAssignAuth(row){
      this.$router.push('/system/assignAuth?id='+row.id+'&roleName='+row.roleName);
    },
    //封装提示信息
    tips(flag,msg){
        if(flag){
            this.$message.success(msg+'成功')
        }else{
            this.$message.danger(msg+'失败')
        }
    }


   }
}
</script>


<style>

</style>